<template>
  <div class="pengyou_container">
    <div v-if="$route.query.useEvents">
      <div class="pengyou_container_mainTitle">
        <div class="pengyou_container_mainTitle_headImg">
          <el-image lazy :src="useEvents.user.avatarUrl" />
        </div>
        <div class="pengyou_container_mainTitle_text">
          <div class="pengyou_container_mainTitle_text_top">
            <div class="pengyou_container_mainTitle_text_topLeft">
              {{ useEvents.user.nickname }}
            </div>
            <div class="pengyou_container_mainTitle_text_topRight">
              {{ dongTaiStatus(useEvents.type) }}
            </div>
          </div>
          <div class="pengyou_container_mainTitle_text_bottom">
            <div class="dongTai_name_month">
              {{
                `${new Date(useEvents.eventTime).getYear()}年${
                  new Date(useEvents.eventTime).getMonth() + 1
                }月${new Date(useEvents.eventTime).getDate()}日`
              }}
            </div>
            <div class="dongTai_name_min">
              {{
                    `${new Date(useEvents.eventTime).getHours() &lt; 10 ? "0" + new Date(useEvents.eventTime).getHours() : new Date(useEvents.eventTime).getHours()}:${
                      new Date(useEvents.eventTime).getMinutes() &lt; 10
                        ? "0" + new Date(useEvents.eventTime).getMinutes()
                        : new Date(useEvents.eventTime).getMinutes()
                    }`
              }}
            </div>
          </div>
        </div>
      </div>

      <div class="dongTai_container_contact_inside_middle">
        <div
          class="dongTai_middle_neirong"
          v-if="useEvents.json.resource && useEvents.type == 31"
        >
          <span class="dongTai_middle_neirong_art">@cuicheng</span>
          <span class="dongTai_middle_neirong_contact">{{
            useEvents.json.resource.content
          }}</span>
          <div class="dongTai_middle_neirong_zuozhe">
            {{ useEvents.json.resource.resourceName }}
          </div>
        </div>
        <div
          style="
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 30px 10px 15px;
          "
          class="dongTai_middle_neirong"
          v-else-if="useEvents.json.resource == null && useEvents.type == 31"
        >
          该评论已删除
        </div>
        <div
          class="dongTai_middle_pic"
          v-else-if="useEvents.json.resource && useEvents.type == 56"
        >
          <div class="dongTai_middle_pic_title">
            <span class="dongTai_middle_pic_titles"
              >#{{ useEvents.json.resource.title }}#</span
            >
            <span class="">{{ useEvents.json.resource.subTitle }}</span>
          </div>
          <div class="dongTai_middle_pic_pic">
            <el-image lazy :src="useEvents.json.resource.coverImgUrl" />
          </div>
        </div>

        <div
          class="dongTai_2"
          v-else-if="useEvents.json && useEvents.type == 35"
        >
          {{ useEvents.json.msg }}
        </div>

        <div
          class="dongTai_middle2"
          v-else-if="useEvents.json.resource && useEvents.type == 57"
        >
          <div class="dongTai_middle2_contact">
            {{ useEvents.json.resource.mlogDetail.content.text }}
          </div>
          <div
            class="dongTai_middle_pic_DanQu_contact"
            v-if="useEvents.json.resource.mlogDetail.type == 1"
          >
            <div class="dongTai_middle_pic_DanQu_contact_img">
              <el-image
                v-if="useEvents.json.resource.mlogDetail.content.song.coverUrl"
                lazy
                :src="useEvents.json.resource.mlogDetail.content.song.coverUrl"
              />
            </div>
            <div class="dongTai_middle_pic_DanQu_contact_text">
              <div class="dongTai_middle_pic_DanQu_contact_text_name">
                {{ useEvents.json.resource.mlogDetail.content.song.name }}
              </div>
              <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                <span
                  v-for="(childItem, index) in useEvents.json.resource
                    .mlogDetail.content.song.artists"
                  :key="childItem.id"
                >
                  {{
                    (index ==
                      useEvents.json.resource.mlogDetail.content.song.artists
                        .length -
                        1 &&
                      childItem.artistName) ||
                    childItem.artistName + "/"
                  }}
                </span>
              </div>
            </div>
          </div>
          <div v-else>
            <video-player
              class="video-player vjs-custom-skin"
              ref="videoPlayer"
              :playsinline="true"
              :options="playerOptions"
            ></video-player>
          </div>
          <div class="dongTai_middle_pic_DanQu_contact_imgArray">
            <div
              class="dongTai_middle_pic_DanQu_contact_imgArray_img"
              v-for="(childItem, index) in useEvents.json.resource.mlogDetail
                .content.image"
              :key="index"
            >
              <el-image lazy :src="childItem.imageUrl" />
            </div>
          </div>
        </div>

        <div
          class="dongTai_middle_pic_DanQu"
          v-else-if="useEvents.json && useEvents.type == 18"
        >
          <div
            class="dongTai_middle_pic_DanQu_title"
            :style="{
              color:
                useEvents.json.msg.indexOf('#') == -1 ? 'black' : '#66b1ff',
            }"
          >
            {{ useEvents.json.msg }}
          </div>
          <div
            style="cursor: pointer"
            class="dongTai_middle_pic_DanQu_contact"
            @click="
              boFangSing(
                useEvents.json.song.name,
                useEvents.json.song.artists,
                useEvents.json.song.album.blurPicUrl,
                useEvents.json.song.id
              )
            "
          >
            <div class="dongTai_middle_pic_DanQu_contact_img">
              <el-image
                v-if="useEvents.json.song.album.blurPicUrl"
                lazy
                :src="useEvents.json.song.album.blurPicUrl"
              />
            </div>
            <div class="dongTai_middle_pic_DanQu_contact_text">
              <div class="dongTai_middle_pic_DanQu_contact_text_name">
                {{ useEvents.json.song.name }}
              </div>
              <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                <span
                  v-for="(childItem, index) in useEvents.json.song.artists"
                  :key="childItem.id"
                >
                  {{
                    (index == useEvents.json.song.artists.length - 1 &&
                      childItem.name) ||
                    childItem.name + "/"
                  }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div
          class="dongTai_middle_pic_DanQu"
          v-else-if="useEvents.json && useEvents.type == 19"
        >
          <div class="dongTai_middle_pic_DanQu_title">
            {{ useEvents.json.msg }}
          </div>
          <div class="dongTai_middle_pic_DanQu_contact">
            <div class="dongTai_middle_pic_DanQu_contact_img">
              <el-image
                v-if="useEvents.json.album.picUrl"
                lazy
                :src="useEvents.json.album.picUrl"
              />
            </div>
            <div class="dongTai_middle_pic_DanQu_contact_text">
              <div class="dongTai_middle_pic_DanQu_contact_text_name">
                {{ useEvents.json.album.name }}
              </div>
              <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                <span
                  v-for="(childItem, index) in useEvents.json.album.artists"
                  :key="childItem.id"
                >
                  {{
                    (index == useEvents.json.album.artists.length - 1 &&
                      childItem.name) ||
                    childItem.name + "/"
                  }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div
          class="dongTai_zhuanFa"
          v-else-if="useEvents.json && useEvents.type == 22"
        >
          <div class="dongTai_zhuanFa_txt">
            {{ useEvents.json.msg }}
          </div>
          <div
            v-if="useEvents.json.event == null"
            class="dongTai_zhuanFa_otherDongTai"
          >
            <div class="delete_dongTai">该动态已删除</div>
          </div>
          <div
            v-else
            class="dongTai_zhuanFa_otherDongTai"
            style="cursor: pointer"
          >
            <div>
              <div class="dongTai_zhuanFa_otherDongTai_name">
                @{{ useEvents.json.event.user.nickname }}
              </div>
              <div class="dongTai_zhuanFa_otherDongTai_contact">
                {{ useEvents.json.event.info.commentThread.resourceTitle }}
              </div>
            </div>
          </div>
        </div>

        <div
          class="fenXiang_MV"
          v-else-if="useEvents.json && useEvents.type == 21"
        >
          暂不支持视频
        </div>

        <div
          class="fenXiang_MV"
          v-else-if="useEvents.json && useEvents.type == 41"
        >
          暂不支持视频/MV播放
        </div>

        <div
          class="fengXang_BoKe"
          v-else-if="useEvents.json && useEvents.type == 28"
        >
          <div class="fengXang_BoKe_txt">
            {{ useEvents.json.msg }}
          </div>
          <div class="fengXang_BoKe_contact">
            <div class="fengXang_BoKe_contact_img">
              <el-image :src="useEvents.json.djRadio.picUrl" lazy />
            </div>
            <div class="fengXang_BoKe_contact_right">
              <div class="fengXang_BoKe_contact_right_title">
                <div class="fengXang_BoKe_contact_right_title_left">
                  {{ useEvents.json.djRadio.category }}
                </div>
                <div class="fengXang_BoKe_contact_right_title_right">
                  {{ useEvents.json.djRadio.name }}
                </div>
              </div>
              <div style="font-size: 12px">
                by{{ useEvents.json.djRadio.dj.nickname }}
              </div>
            </div>
          </div>
        </div>

        <div
          class="fengXang_BoKe"
          v-else-if="useEvents.json && useEvents.type == 13"
        >
          <div class="fengXang_BoKe_txt">
            {{ useEvents.json.msg }}
          </div>
          <div
            @click="jumpGeDan(useEvents.json.playlist.id)"
            style="cursor: pointer"
            class="fengXang_BoKe_contact"
          >
            <div class="fengXang_BoKe_contact_img">
              <el-image :src="useEvents.json.playlist.coverImgUrl" lazy />
            </div>
            <div class="fengXang_BoKe_contact_right">
              <div class="fengXang_BoKe_contact_right_title">
                <div class="fengXang_BoKe_contact_right_title_left">歌单</div>
                <div class="fengXang_BoKe_contact_right_title_right">
                  {{ useEvents.json.playlist.name }}
                </div>
              </div>
              <div style="font-size: 12px">
                by{{ useEvents.json.playlist.creator.nickname }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dongTai_container_contact_inside_bottome">
        <div class="dongTai_container_contact_inside_bottome_middle">
          <div class="dongTai_container_contact_inside_bottome_middle_inside">
            <div
              class="dongTai_container_contact_inside_bottome_middle_inside_cen"
            >
              <i style="font-size: 15px" class="el-icon-thumb" />
              <span>({{ useEvents.info.likedCount }})</span>
            </div>
          </div>
          <div class="dongTai_container_contact_inside_bottome_middle_inside">
            <div
              class="dongTai_container_contact_inside_bottome_middle_inside_cen"
            >
              <i style="font-size: 15px" class="el-icon-position" />
              <span>({{ useEvents.info.shareCount }})</span>
            </div>
          </div>
          <div class="dongTai_container_contact_inside_bottome_middle_inside">
            <div
              class="dongTai_container_contact_inside_bottome_middle_inside_cen"
            >
              <i style="font-size: 15px" class="el-icon-tickets" />
              <span>({{ useEvents.info.commentCount }})</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pingLun_cpn">
        <PingLun :domLoading="domLoading" :resComments="resComments" />
      </div>
    </div>
    <div v-else>
      <div class="pengyou_container_title">动态</div>
      <div class="pengyou_container_contact">暂无动态</div>
    </div>
  </div>
</template>

<script>
import { commentEvent, commentPlaylist } from "../../../api/index";
import {
  commonDongTaiComputed,
  boFangSing,
} from "../../../common/mixin/commonJs";
const PingLun = () => import("../../../components/pingLun.vue");
export default {
  mixins: [commonDongTaiComputed, boFangSing],
  components: {
    PingLun,
  },
  created() {
    if (this.$route.query.useEvents) {
      commentEvent({
        threadId: this.$route.query.useEvents.info.commentThread.id,
      }).then((res) => {
        this.resComments = res;
      });

      this.$route.query.useEvents.json = eval(
        "(" + this.$route.query.useEvents.json + ")"
      );
      this.useEvents = this.$route.query.useEvents;
      if (this.useEvents.json.resource) {
        if (this.useEvents.json.resource.mlogDetail != null) {
          if (this.useEvents.json.resource.mlogDetail.type == 2) {
            this.playerOptions.sources[0].src =
              this.useEvents.json.resource.mlogDetail.content.video.urlInfo.url;
          }
        }
      }
      console.log(this.useEvents);
    }
  },
  data() {
    return {
      domLoading: false,
      resComments: {},
      useEvents: { json: {} },
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
    };
  },
  methods:{
    jumpGeDan(id){
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id,
        },
      });
    },
  }
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.pengyou_container {
  width: 95%;
  .pengyou_container_mainTitle {
    margin-top: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .pengyou_container_mainTitle_headImg {
      width: 60px;
      height: 60px;
      margin-right: 10px;
      .el-image {
        border-radius: 50%;
        width: 100%;
        height: 100%;
      }
    }
    .pengyou_container_mainTitle_text {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 50px;
      .pengyou_container_mainTitle_text_top {
        display: flex;
        font-size: 14px;
        .pengyou_container_mainTitle_text_topLeft {
          color: #66b1ff;
          margin-right: 15px;
        }
        .pengyou_container_mainTitle_text_topRight {
          color: #909399;
        }
      }
      .pengyou_container_mainTitle_text_bottom {
        font-size: 12px;
        color: #909399;
        display: flex;
        .dongTai_name_month {
          margin-right: 5px;
        }
      }
    }
  }

  .dongTai_container_contact_inside_middle {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    // margin-bottom: 10px;
    .dongTai_middle_neirong {
      width: 85%;
      background: #eeeff1;
      padding: 5px 20px 5px 40px;
      border-radius: 5px;
      .delete_PingLun {
        font-size: 13px;
      }
      .dongTai_middle_neirong_art {
        color: #66b1ff;
        font-size: 13px;
        cursor: pointer;
        margin-right: 5px;
      }
      .dongTai_middle_neirong_contact {
        font-size: 13px;
      }
      .dongTai_middle_neirong_zuozhe {
        margin-top: 20px;
        font-size: 13px;
        color: rgb(144, 147, 153);
      }
    }
    .dongTai_middle_pic {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .dongTai_middle_pic_title {
        font-size: 13px;
        margin-bottom: 10px;
        .dongTai_middle_pic_titles {
          color: #66b1ff;
        }
      }
      .dongTai_middle_pic_pic {
        width: 150px;
        height: 150px;
        border-radius: 5px;
        .el-image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .dongTai_2 {
      width: 85%;
      padding: 5px 20px 5px 40px;
      background: #eeeff1;
    }
    .dongTai_middle2 {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .dongTai_middle2_contact {
        font-size: 13px;
        margin-bottom: 10px;
      }
      .dongTai_middle_pic_DanQu_contact {
        height: 60px;
        background: #eeeff1;
        border-radius: 5px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .dongTai_middle_pic_DanQu_contact_img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
          @include flex;
          .el-image {
            width: 50px;
            height: 50px;
            border-radius: 5px;
          }
        }
        .dongTai_middle_pic_DanQu_contact_text {
          height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .dongTai_middle_pic_DanQu_contact_text_name {
            font-size: 14px;
          }
          .dongTai_middle_pic_DanQu_contact_text_ar {
            display: flex;
            font-size: 12px;
            color: #909399;
          }
        }
      }
      .video-player {
        width: 300px;
        height: 200px;
      }
      .dongTai_middle_pic_DanQu_contact_imgArray {
        width: 400px;
        display: flex;
        flex-wrap: wrap;

        .dongTai_middle_pic_DanQu_contact_imgArray_img {
          width: 30%;
          height: 120px;
          margin-bottom: 5px;
          margin-right: 5px;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 5px;
          }
        }
      }
    }
    .dongTai_middle_pic_DanQu {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .dongTai_middle_pic_DanQu_title {
        color: #66b1ff;
        font-size: 14px;
        margin-bottom: 5px;
      }
      .dongTai_middle_pic_DanQu_contact {
        height: 60px;
        background: #eeeff1;
        border-radius: 5px;
        display: flex;
        align-items: center;
        .dongTai_middle_pic_DanQu_contact_img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
          @include flex;
          .el-image {
            width: 50px;
            height: 50px;
            border-radius: 5px;
          }
        }
        .dongTai_middle_pic_DanQu_contact_text {
          height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .dongTai_middle_pic_DanQu_contact_text_name {
            font-size: 14px;
          }
          .dongTai_middle_pic_DanQu_contact_text_ar {
            display: flex;
            font-size: 12px;
            color: #909399;
          }
        }
      }
    }
    .dongTai_zhuanFa {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .dongTai_zhuanFa_txt {
        font-size: 13px;
        margin-bottom: 10px;
      }
      .dongTai_zhuanFa_otherDongTai {
        background: #eeeff1;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding: 10px;
        font-size: 12px;
        .delete_dongTai {
          @include flex;
          width: 100%;
        }
        .dongTai_zhuanFa_otherDongTai_name {
          color: #66b1ff;
          cursor: pointer;
          margin-right: 5px;
          margin-bottom: 5px;
        }
        .dongTai_zhuanFa_otherDongTai_contact {
          color: rgb(144, 147, 153);
        }
      }
    }
    .fenXiang_MV {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .video-player {
        width: 300px;
        height: 200px;
      }
    }
    .fengXang_BoKe {
      width: 85%;
      padding: 5px 20px 5px 40px;
      .fengXang_BoKe_txt {
        font-size: 13px;
        margin-bottom: 10px;
      }
      .fengXang_BoKe_contact {
        height: 60px;
        background: #eeeff1;
        border-radius: 5px;
        display: flex;
        align-items: center;
        .fengXang_BoKe_contact_img {
          width: 60px;
          height: 60px;
          margin-right: 10px;
          @include flex;
          .el-image {
            width: 50px;
            height: 50px;
            border-radius: 5px;
          }
        }
        .fengXang_BoKe_contact_right {
          height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .fengXang_BoKe_contact_right_title {
            font-size: 13px;
            display: flex;
            align-items: center;
            .fengXang_BoKe_contact_right_title_left {
              color: rgb(122, 192, 17);
              border: 1px solid rgb(122, 192, 17);
              padding: 2px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  .dongTai_container_contact_inside_bottome {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    .dongTai_container_contact_inside_bottome_middle {
      width: 82%;
      display: flex;
      flex-direction: row-reverse;
      .dongTai_container_contact_inside_bottome_middle_inside {
        font-size: 12px;
        padding-left: 15px;
        padding-right: 15px;
        border-right: 1px solid #eeeff1;
        display: flex;
      }
    }
  }
  .pingLun_cpn {
    padding-left: 40px;
  }

  .pengyou_container_title {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
  }
  .pengyou_container_contact {
    @include flex;
    height: 400px;
  }
}
</style
>>
